{% extends "pages.html" %}
{% load humanize %}
{% load cache %}
{% load custom %}

{% block subTitle %}{{site_title}}{% endblock %}
{% block script %}
Go2.Init("{{username}}", "{{csrf}}");

var txtUsername;
var txtLink;
var txtTitle;

function Loaded()
{
	txtUsername = $("#username")[0];

	txtLink = $("#link")[0];
	txtTitle = $("#title")[0];
	
	Go2.AddEventFn(txtLink, "keydown", function(evt)
		{
		if (evt.keyCode == 13)
			{
			txtTitle.focus();
			evt.preventDefault();
			}
		});

	Go2.AddEventFn(txtTitle, "keydown", function(evt)
		{
		if (evt.keyCode == 13)
			{
			Shorten();
			}
		});

	if (txtUsername)
		{
		Go2.DOM.SetFocusIfVisible(txtUsername);
		Go2.AddEventFn(txtUsername, "keydown", function(evt)
			{
			if (evt.keyCode == 13)
				Go2.SetUsername(txtUsername.value);
			});
		}
	else
		Go2.DOM.SetFocusIfVisible(txtLink);
		
	if (Go2.Browser.fIE)
		{
		$("#bookmark_inst_ie").show();
		}
	else
		{
		$("#bookmark_inst_ff").show();
		}
		
	Go2.DisplayBars(50);
}

function Shorten()
{
	Go2.Map(txtLink.value, txtTitle.value);
}

{% endblock %}

{% block pagebody %}
<div class="left">

	<h2>What is {{site_name}}?</h2>
	<p>
	You can use {{site_name}} to take any long link (URL) and convert it to a shorter one that
	you can send in Twitter, IM, or Email messages.  Your link will display the page
	you want to share alongside a chat window to exchange comments with your readers.
	Try it:
	</p>
	<p style="text-align:center;"><a target="_blank" href="/G">http://{{site_host}}/G</a></p>
	<h2>{{site_name}} Benefits</h2>
	<ul>
		<li><b>Discuss</b> - Exchange comments with your readers on every link page.</li>
		<li><b>Feedback</b> - See how many people are visiting and commenting on your links.</li>
		<li><b>Personalized</b> - Pick a nickname to save a summary of all the
			{% if username %}<a href="/user/{{username}}" title="{{username}}'s shared links">{% endif %}
			links you've shared{% if username %}</a>{% endif %}.
		</li>
		<li><b>Promote</b> - Promote your link by adding one or more "[tags]" to any comment -
		the most popular links for each tag are listed in their own page, for example:
		<p style="text-align:center"><a href="/tag/video">http://{{site_host}}/tag/video</a></p>
		</li>
		<li><b>Easy Sharing</b> - Single-click sharing of your links via Email, Facebook, or Twitter.</li>
		<li><b>Shorter links</b> - {{site_name}} links are only {{link_length}} characters long - perfect for Twitter messages.</li>
	</ul>
	
	{% cache 180 home app_version %}
	
	<h2>Today's most popular links ({{total_pages|intcomma}} shared to date)</h2>		
	<table class="scores">
		<tr><th>Title</th><th class="num">Visits</th><th>By</th><th>Score</th></tr>
		{% for page in pages %}
			<tr>
				<td class="title"><div>
					<img class="favicon" src="http://{{page.Domain}}/favicon.ico">
					<a target="_blank" href="/{{page.GetId}}" title="{{page.url|escape}}">{{page.title|escape}}</a>
				</div></td>
				<td class="num">{{page.viewCount|intcomma}}</td>
				<td>
					{% if page.Creator %}
						<a href="/user/{{page.Creator}}" title="{{page.Creator}}">
							<img class="inline" src="/user/{{page.Creator}}/picture_thumb">
						</a>
					{% endif %}
				</td>
				<td class="bar-td"><div class="bar-holder">
					<div class="bar" bar_value="{{page.timescore|floatformat:1}}"
						 title="{{page.timescore|floatformat:1}} points Today">&nbsp;
					 </div>
				</div></td>
			</tr>
		{% endfor %}
	</table>
	
	{% endcache %}
	
	<p style="text-align:right;">
		<a href="/popular/">more...</a>
	</p>
	
</div> <!-- left -->

<div class="right">

	<div class="callout">
		<h2>Install the Bookmarklet<br/>(Try it - its Free)</h2>
		<div>
			<div class="bookmark_inst" id="bookmark_inst_ff">
				<div style="text-align:center;margin: 0 0 5px 0;">
					<a id="bookmarklet" class="bookmarklet" title="Drag me to your bookmarks toolbar"
					   onclick="alert('Instead of clicking this link, you need to drag it to your toolbar.');return false;"
					   href="javascript:location.href='{{host}}map/?url='+encodeURIComponent(location)+'&title='+encodeURIComponent(document.title);">
					   <img src="/images/bookmarklet.png" alt="{{site_name}}">
					</a>
				</div>
				To get started, just drag this bookmarklet to your Bookmarks Toolbar.
			</div>
			<div class="bookmark_inst" id="bookmark_inst_ie">
				<div style="text-align:center;margin: 0 0 5px 0;">
					<a id="bookmarklet" class="bookmarklet" title="{{site_name}}"
					   onclick="alert('Instead of clicking this link, you need to drag it to your toolbar.');return false;"
					   href="javascript:location.href='{{host}}map/?url='+encodeURIComponent(location)+'&title='+encodeURIComponent(document.title);">
					   <img src="/images/bookmarklet.png" alt="{{site_name}}">
					</a>
				</div>
				<ul>
					<li>Right click on the {{site_name}} link (above)</li>
					<li>Select "Add to Favorites..."</li>
					<li>Click "Yes" when you see the Security Alert.</li>
					<li>Select "Links" in the "Create In" dropdown.</li>
					<li>Click "Add"</li>
				</ul>
			</div>
			<p>
			Once installed, visit any web page you want to share, and click the {{site_name}} button in
			your Bookmarks Toolbar.
			</p>
		</div>
	</div>
	
	<h2>Shorten a link now:</h2>
	<p>If you can't install the bookmarklet just now, you can shorten a single link
	using this form:</p>
	<table style="margin:15px 0;">
	<tr><th><label for="link">Link:</label></th><td><input id="link" style="width:300px;" value="http://"/></td></tr>
	<tr><th><label for="title">Title:</label></th><td><input id="title" style="width:300px;"/></td></tr>
	<tr><th></th><td style="text-align:right;"><input type="button" onclick="Shorten();" value="Shorten"/></td></tr>
	</table>
	
	<div style="margin:auto;width:320px;text-align:center;padding-bottom:10px;">
		<h2>Video Tour of {{site_name}}</h2>
		<object width="320" height="265">
			<param name="movie" value="http://www.youtube.com/v/szsHrobNSUk&hl=en&fs=1&color1=0x5d1719&color2=0xcd311b"></param>
			<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
			<embed src="http://www.youtube.com/v/szsHrobNSUk&hl=en&fs=1&color1=0x5d1719&color2=0xcd311b" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed>
		</object>
	</div>

	<div style="margin:auto;text-align:center;">
		<h2>Read what others are saying about {{site_name}}</h2>
		<div style="margin:auto;width:220px;">
			<a target="_blank" href="http://blog.go2web20.net/2009/01/more-than-just-link-shortening-service.html">
				<img class="extlogo" src="/images/external/go2web20.gif"/>
			</a>		
			<a target="_blank" href="http://fearlessblogger.com/2008/12/go2me-dotcom/">
				<img class="extlogo" src="/images/external/fearless-blogger.png">
			</a>
			<a target="_blank" href="http://www.techflash.com/venture/Favescom_still_alive_but_on_life_support33803969.html">
				<img class="extlogo" src="/images/external/TechFlash.png">
			</a>
			<a target="_blank" href="http://kidtechguru.blogspot.com/2009/01/is-go2me-better-than-tinyurl-maybe.html">
				<img class="extlogo" src="/images/external/kidtechguru.png"/>
			</a>
			<a target="_blank" href="http://www.killerstartups.com/Web-App-Tools/go2-me-a-link-shortening-service">
				<img class="extlogo" src="/images/external/Logo_killer.jpg"/>
			</a>
			<a target="_blank" href="http://www.webli.st/2009/01/13/go2me-url-shortener-tool/">
				<img class="extlogo" src="/images/external/weblist.png">
			</a>

			<a target="_blank" href="http://www.jaimeviniciusbarros.com/2009/01/go2mealinkshorteningservice/">
				<img class="extlogo" src="/images/external/online-life.png">
			</a>
			<a target="_blank" href="http://www.listio.com/web20/app/Go2me/">
				<img class="extlogo" src="/images/external/listio.png">
			</a>
			<a target="_blank" href="http://descary.com/go2me-un-super-service-de-raccourcis-url/">
				<img class="extlogo" src="/images/external/descary.png">
			</a><br/>
			<p class="exttext">(French)</p>
			<a target="_blank" href="http://jacopofarina.wordpress.com/2009/01/10/go2me-accorciare-unurl-tramite-un-bookmarklet/">
				<img class="extlogo" src="/images/external/jacopo.png">
			</a><br/>
			<p class="exttext">(Italian)</p>
			<a target="_blank" href="http://br.wwwhatsnew.com/2009/01/go2me-encurtador-de-urls-com-estatisticas-e-comentarios/">
				<img class="extlogo" src="/images/external/wwwhats-new.png">
			</a><br/>
			<p class="exttext">(Brazil/Spanish)</p>
		</div>
	</div>

</div> <!-- right -->

{% endblock %}
